<template>
	<view class="app">
		<u-navbar placeholder="true" title="授权登录" :autoBack="true"></u-navbar>
		<view class="column center">
			<view><image class="imag-logo" src="/static/images/logoy.png"></image></view>
			<view class="logo-v1"><text class="logo-text1">群众缘婚介</text></view>
			<view class="logo-v2"><text class="logo-text2">QUN ZHONG YUAN HUN JIE</text></view>
		</view>
		<view class="center aeadfe">
			<button style="background: #f34f4f;" class="input-content row center" :loading="loading" v-if="showp" type="primary" @click="toProviderLogin">
			<!-- <button style="background: #f34f4f;" class="input-content row center" :loading="loading" v-if="showp" type="primary" @click="h5dde"> -->
				<u-icon name="weixin-fill" color="#FFFFFF" size="20"></u-icon>
				<text>微信授权登录</text>
			</button>

			<button class="input-content" :loading="loading" type="primary" open-type="getPhoneNumber" @getphonenumber="getphone" v-else>获取电话</button>
		</view>
		<view class="input-content-qx" @click="tabBarUrl()">取消</view>
		<view class="input-content-xy center">
			<u-checkbox-group @change="checkboxChange">
				<u-checkbox size="14" activeColor="red" :checked="protocol ? true : false" shape="circle"></u-checkbox>
				<text class="tx">我已阅读并同意</text>
				<text class="xiexyi">《用户协议》</text>
			</u-checkbox-group>
		</view>
		
		
		<u-popup customStyle="width: 660rpx;height: 900rpx;padding: 30rpx;" bgColor="#FFFFFF" :show="showtc" mode="center" @close="close">
				<u-parse :content="content" ></u-parse>
		</u-popup>
		
	</view>
</template>

<script>
import auth_api from '@/api/auth.js';
import api from '@/api/commonc.js';
export default {
	data() {
		return {
			content: '', // 内容
			showtc: false,
			protocol: false,
			userInfo: {},
			iv: '',
			encryptedData: '',
			code: '',
			session_key: '',
			superior: 0,
			openid: '',
			showp: true,
			loading: false // 提交中
		};
	},
	onShow() {
		this.getcode();
		this.getInfo();
	},
	onLoad(option) {
		var superior = uni.getStorageSync('superior');
		if (superior) {
			this.superior = superior;
		}
	},
	methods: {
		async getInfo() {
			var data = await api.getInfo();
			this.content = data.data.content_protocol_uniapp;
		},
		close() {
			this.showtc = false;
		},
		checkboxChange() {
			this.$set(this, 'protocol', !this.protocol);
			if (this.protocol) {
				this.$set(this, 'showtc', !this.showtc);
			}

			console.log('protocol', this.protocol);
		},
		fanhui() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		tabBarUrl() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},

		async h5dde() {
			if (!this.protocol) {
				this.$util.msg('请阅读用户协议');
				return;
			}
			
			var _this = this;
			var openid = 'oEzOr4mWynFlNzWURtgyTSjwfM0c';
			const res = await auth_api.openidUserInfo({ openid: openid });
			console.log('第三步B,看是不是注册用户', res);
			if (res.data.id) {
				//已经注册
				_this.openid = openid;
				_this.userInfo['phone'] = res.data.phone;
				_this.userInfo['pr'] = res.data.pr;
				_this.id = res.data.id;

				this.loginSuccessCallBack({
					openid: _this.openid,
					userInfo: _this.userInfo
				});
				return;
			}
		},

		// 第3方授权登录
		toProviderLogin() {
			
			if (!this.protocol) {
				this.$util.msg('请阅读用户协议');
				return;
			}
			//获得头像，昵称
			uni.getUserProfile({
				desc: 'Wexin', // 这个参数是必须的
				success: infoRes => {
					console.log('第二步获取微信用户信息', infoRes);
					this.userInfo = infoRes.userInfo;
					this.iv = infoRes.iv;
					this.encryptedData = infoRes.encryptedData;
					this.getServiceUserInfo({
						code: this.code
					});
				},
				fail: err => {
					console.log(err);
					uni.hideLoading();
				}
			});
		},

		//获取code码
		getcode() {
			let that = this;
			uni.login({
				success: function(loginRes) {
					console.log('第一步获取code', loginRes);
					that.code = loginRes.code;
				},
				fail: function(err) {
					console.log(err);
				}
			});
		},

		// 获取应用内的认证授权信息
		async getServiceUserInfo(reqData) {
			let _this = this;
			// 获取openid

			const { code, message, data } = await auth_api.loginByProvider(reqData);
			console.log('第三步获取openid', data);
			if (data.openid) {
				const res = await auth_api.openidUserInfo({ openid: data.openid });
				console.log('第三步B,看是不是注册用户', res);
				if (res.data.id) {
					//已经注册
					_this.openid = data.openid;
					_this.userInfo['phone'] = res.data.phone;
					_this.userInfo['pr'] = res.data.pr;

					this.loginSuccessCallBack({
						openid: _this.openid,
						userInfo: _this.userInfo
					});
					return;
				}
			}

			uni.hideLoading();

			if (code != 200) {
				this.$util.msg(message);
				return;
			}
			let aa = data.openid;
			let bb = data.session_key;
			if (aa && bb) {
				_this.openid = aa;
				_this.session_key = bb;
				_this.showp = false;
				return;
			} else {
				this.$util.msg('登录失败');
				this.navTo('/pages/auth/login');
			}
		},

		async getphone(e) {
			//获取code码
			let _this = this;
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				// console.log('154', e);
				_this.iv = e.detail.iv;
				_this.encryptedData = e.detail.encryptedData;
				//获取手机号，增加用户微信信息
				const { code, message, data } = await auth_api.insetDatatwo({
					userInfo: _this.userInfo,
					openid: _this.openid,
					session_key: _this.session_key,
					iv: _this.iv,
					encryptedData: _this.encryptedData
				});

				console.log('第四步获取电话', data);

				_this.userInfo['phone'] = data.phone;
				_this.userInfo['pr'] = data.pr;
			}

			// 登录成功
			this.loginSuccessCallBack({
				openid: _this.openid,
				userInfo: _this.userInfo
			});
		},
		// 登录成功操作 vuex
		loginSuccessCallBack(data) {
			this.$util.msg('登录成功');
			// 状态管理保存用户信息
			this.$store.commit('setToken', data);
			setTimeout(() => {
				// this.navBack();
				uni.switchTab({
					url: '/pages/index/index'
				});
			}, 500);
		}
	}
};
</script>

<style scoped lang="scss">
.app {
	padding-top: 300rpx;
}
.u-content {
	background: red;
	width: 700rpx;
	
	margin-top: 10rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
}
button::after {
	border: none;
}

.imag-logo {
	height: 120rpx;
	width: 110rpx;

	margin-bottom: 20rpx;
}

.logo-v1 {
	margin-bottom: 20rpx;
}

.logo-text1 {
	width: 179rpx;
	height: 32rpx;
	font-size: 32rpx;
	font-family: Microsoft YaHei;
	font-weight: bold;
	color: #333333;
}

.logo-v2 {
	margin-bottom: 20rpx;
}

.logo-text2 {
	font-size: 23rpx;
	font-family: PingFang;
	font-weight: 500;
	color: #b6b6b6;
}

.input-content {
	width: 580rpx;
	height: 86rpx;
	background: #f34f4f;
	// background: linear-gradient(90deg, #BB73D5, #643A92);
	// box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(100, 58, 146, 0.4);
	border-radius: 43rpx;
	text-align: center;
	font-size: 26rpx;
	line-height: 86rpx;
	position: absolute;
	bottom: 460rpx;
}

.input-content-qx {
	width: 100%;
	height: 86rpx;
	background: #ffffff;
	border-radius: 43rpx;
	text-align: center;
	font-size: 26rpx;
	line-height: 86rpx;
	position: absolute;
	bottom: 320rpx;

	font-size: 26rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #000000;
}

.input-content-dh {
	width: 580rpx;
	height: 86rpx;
	background: #f34f4f;
	// background: linear-gradient(90deg, #BB73D5, #643A92);
	// box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(100, 58, 146, 0.4);
	border-radius: 43rpx;
	text-align: center;
	font-size: 26rpx;
	line-height: 86rpx;
	position: absolute;
	bottom: 200rpx;
}

.input-content-xy {
	width: 100%;
	height: 60rpx;
	// background: #f2f2f2;
	border-radius: 43rpx;
	text-align: center;
	font-size: 26rpx;
	position: absolute;
	bottom: 260rpx;

	font-size: 26rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #000000;
}

.aeadfe {
	uni-button:after {
		border: 1rpx solid #f2f2f2;
	}
}

.tx {
	font-size: 23rpx;
	font-family: PingFang;
	font-weight: 500;
	color: #999999;
	line-height: 34rpx;
}

.xiexyi {
	font-size: 23rpx;
	font-family: PingFang;
	font-weight: 500;
	color: red;
	line-height: 34rpx;
}
</style>
